<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    
    
    <div id="box">
        <button class="btn">toggle</button>
        <button class="btn2">big</button>
        <div class="box">

        </div>
    </div>


    <script src="./base/vue.min.js"></script>
    <script>
        //mvc的设计模式 设计项目逻辑
        //[https://blog.csdn.net/victoryzn/article/details/78392128]
        //[http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html]


        /*
            mvc设计模式：
                m : model  v；view   c:controller
                c的作用： 就是将m层的数据在view层显示

                vue是一个基于mvvm的框架，核心专注于视图层
        */

        //m层
        let data = {
            isShow:true,
            isBig:false
        }
        //v层
        let boxDom = document.getElementsByClassName("box")[0];
        //c层
        function Controller(){
            this.init();
        }
        Controller.prototype = {
            init(){
                this.addEvent()
            },
            addEvent(){
                let btnDom = document.getElementsByClassName("btn")[0]
                let btn2Dom = document.getElementsByClassName("btn2")[0]
                //let that = this;
                btnDom.onclick = ()=>{ //箭头函数内部无this指向
                    data.isShow = !data.isShow
                    //渲染视图
                    this.render()
                }
                btn2Dom.onclick = ()=>{
                    data.isBig = true
                    this.render()
                }
            },
            render(){
                boxDom.style.display = data.isShow?"block":"none"
                boxDom.style.width = data.isBig?"400px":"100px"
            }
        }
        new Controller();//实例化Controller


        //一种面向过程的写法
        /* let btnDom = document.getElementsByClassName("btn")[0]; 
        let boxDom = document.getElementsByClassName("box")[0]; 
        let flag = true;
        btnDom.onclick = function(){
            if(flag){
                boxDom.style.display = "none"
                flag = false;
            }else{
                boxDom.style.display = "block"
                flag = true;
            }
        } */
    </script>
</body>
</html>